<template>
  <div class="page">
    <!-- 顶部导航栏 -->
    <header class="navbar">
      <div class="navbar-container">
        <div class="logo-section">
          <img class="logo" src="@/assets/images/homeIcon1.png" alt="">
          <div class="logo-text">欢迎回来，小明同学！</div>
          <div class="date">
            {{ formatDate().date }}
            <span>{{ formatDate().weekday }}</span>
          </div>
        </div>
        <div class="user-info">
          <a @click="showSetting=true"><div class="user-action"><img src="@/assets/images/homeIcon2.png" alt="">设置</div></a>
          <a @click="router.push('/TrainingCenter')"><div class="user-action"><img src="@/assets/images/homeIcon3.png" style="width: 30px;" alt="">消息</div></a>
          <a @click="router.push('/dataCenter')"><img class="user-avatar" src="@/assets/images/homeIcon4.png" alt=""></a>
        </div>
      </div>
    </header>
    <div class="box">
      <div style="display: flex;flex-direction: column;gap: 20px;">
        <div class="actions-box">
          <div class="actions-list">
            <div class="actions-item" style="background: #DED8FF;">
              <img src="@/assets/images/homeIcon5.png" alt="">
              <span>训练中心</span>
            </div>
            <div class="actions-item" style="background: #FFF8EB;" @click="router.push('/mistakeNotebook')">
              <img src="@/assets/images/homeIcon6.png" alt="">
              <span>错题本</span>
            </div>
            <div class="actions-item" style="border: 0.6px solid rgba(111, 85, 255, 0.50);box-shadow: 1px 1px 2px 0 rgba(144, 141, 218, 0.25);">
              <img src="@/assets/images/homeIcon7.png" alt="">
              <span>名师入驻</span>
            </div>
            <div class="actions-item" style="background: #EBFAF3;">
              <img src="@/assets/images/homeIcon8.png" alt="">
              <span>学习报告</span>
            </div>
            <div class="actions-item" style="background: #EEF3FF;" @click="router.push('/myAnswerSheet')">
              <img src="@/assets/images/homeIcon9.png" alt="">
              <span>答题卡</span>
            </div>
            <div class="actions-item" style="border: 0.6px solid rgba(111, 85, 255, 0.50);box-shadow: 1px 1px 2px 0 rgba(144, 141, 218, 0.25);">
              <img src="@/assets/images/homeIcon10.png" alt="">
              <span>中考专题</span>
            </div>
          </div>
          <div class="msg-box">
            <img style="width: 29px;" src="@/assets/images/homeIcon11.png" alt="">
            <span class="u-line-1">您有一份待批改的答题卡</span>
          </div>
        </div>
        <div class="task-box">
          <div class="task-title">
            <img src="@/assets/images/homeIcon12.png" alt="">
            <span>待完成任务</span>
          </div>
          <div class="task-content u-line-3">
            基于您在【二次函数】和【电路分析】上的较薄弱表现，推荐您完成一份约15分钟的AI定制强化测试。
          </div>
          <a @click="router.push('/answerQuestions')"><div class="task-btn">开始练习</div></a>
        </div>
      </div>
      <div class="data-box">
        <div class="data-title">
          <img src="@/assets/images/homeIcon13.png" alt="">
          <span class="u-line-1">我的数据</span>
        </div>
        <div class="my-fraction">
          <div class="u-flex"></div>
        </div>
      </div>
    </div>
  </div>
  <a-modal v-model:open="showSetting" :width="1126" :footer="null">
    <a @click="showName=true"><img style="width: 1078px;height: auto;" src="@/assets/images/showSetting.png" alt=""></a>
  </a-modal>
  <a-modal v-model:open="showName" :width="784" :footer="null">
    <div style="font-size: 24px;font-weight: 500;margin-bottom: 48px;">修改昵称</div>
    <a-input 
      class="modal-input" 
      v-model:value="form.name" 
      placeholder="请输入" 
    />
    <div style="font-size: 20px;color: #818181;margin-bottom: 58px;">昵称限2-32个字符，一个汉字为2个字符</div>
    <div class="u-flex u-row-center" style="gap: 70px;margin-bottom: 45px;">
      <div class="modal-btn" style="background: #EEE;color: #000;" @click="showName=false">取消</div>
      <div class="modal-btn" @click="showName=false">确定</div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const form = ref({
  name: '小明'
})
const showSetting = ref(false)
const showName = ref(false)
// 格式化日期
const formatDate = () => {
  const date = new Date()
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const weekday = weekdays[date.getDay()]
  return {
    date: `${year}年${month}月${day}日`,
    weekday: weekday
  }
}

</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: #F5F6F8;
  padding-bottom: 10vh;
  .navbar {
    background-color: #ffffff;
    margin-bottom: 20px;
    .navbar-container {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
      .logo-section {
        display: flex;
        align-items: center;
        .logo {
          display: block;
          width: 42px;
          height: 42px;
          margin-right: 14px;
        }
        .logo-text {
          font-size: 20px;
          font-weight: 500;
          margin-right: 60px;
        }
        .date {
          color: #333;
          font-size: 20px;
          font-weight: 500;
          span {
            color: #6F55FF;
            margin-left: 10px;
          }
        }
      }
      .user-info {
        display: flex;
        align-items: center;
        .user-action {
          display: flex;
          align-items: center;
          gap: 10px;
          color: #818181;
          font-size: 20px;
          margin-left: 56px;
          img {
            display: block;
            width: 28px;
            height: auto;
          }
        }
        .user-avatar {
          display: block;
          width: 35px;
          height: 35px;
          margin-left: 35px;
        }
      }
    }
  }
  .box {
    width: calc(100vw - 280px);
    border-radius: 6px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 20px;
    .actions-box {
      width: 890px;
      height: 450px;
      padding: 48px 32px 30px;
      border-radius: 6px;
      border: 0.8px solid #E1E1E1;
      background: #FFF;
      .actions-list {
        display: flex;
        flex-wrap: wrap;
        gap: 24px 35px;
        margin-bottom: 30px;
        .actions-item {
          cursor: pointer;
          width: 251px;
          height: 134px;
          flex-shrink: 0;
          border-radius: 6px;
          background: #FFF;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          img {
            width: auto;
            height: 36px;
            display: block;
          }
          span {
            font-size: 20px;
          }
        }
      }
      .msg-box {
        padding: 0 36px;
        height: 40px;
        border-radius: 4px;
        background: #F7F7F7;
        display: flex;
        align-items: center;
        img {
          width: 29px;
          height: auto;
          display: block;
          margin-right: 12px;
        }
        span {
          flex: 1;
          font-size: 18px;
        }
      }
    }
    .task-box {
      width: 890px;
      height: 410px;
      border-radius: 6px;
      border: 0.8px solid #E1E1E1;
      background: #FFF;
      padding: 24px 32px;
      .task-title {
        display: flex;
        align-items: center;
        gap: 22px;
        margin-bottom: 42px;
        img {
          width: 60px;
          height: auto;
          display: block;
        }
        span {
          font-size: 24px;
          font-weight: 500;
        }
      }
      .task-content {
        height: 120px;
        color: #333;
        font-size: 24px;
        line-height: 40px;
        margin-bottom: 50px;
      }
      .task-btn {
        width: 260px;
        height: 60px;
        line-height: 60px;
        border-radius: 100px;
        background: #6F55FF;
        color: #FFF;
        font-size: 20px;
        font-weight: 500;
        text-align: center;
        margin: 0 auto;
      }
    }
    .data-box {
      width: 730px;
      height: 880px;
      flex-shrink: 0;
      border-radius: 6px;
      border: 0.8px solid #E1E1E1;
      background: #FFF;
      padding: 34px 42px;
      .data-title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 28px;
        img {
          width: 90px;
          height: auto;
          display: block;
          margin-right: 10px;
        }
      }
      .my-fraction {
        width: 646px;
        height: 90px;
        border-radius: 4px;
        background: #F7F7F7;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 44px;
      }
    }
  }
}
.modal-input {
  width: 667px;
  height: 80px;
  border-radius: 10px;
  border: 0.6px solid #D4D4D4;
  background: #FFF;
  font-size: 20px;
  margin: 0 auto;
  margin-bottom: 22px;
}
.modal-btn {
  width: 260px;
  height: 60px;
  line-height: 60px;
  border-radius: 100px;
  background: #6F55FF;
  color: #FFF;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}
</style>